<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 通过v-model控制输入框，获取以及设置值.这个指令要用在会变的元素上，因为这是一个双向绑定的指令 -->
        <!--  -->
        <input type="text" v-model="val1">
        <br>
        <textarea v-model="val2"></textarea>
        <br>
        <span>性别</span>
        <input type="radio" value="1" name="sex" v-model="val3">男
        <input type="radio" value="2" name="sex" v-model="val3">女
        <input type="radio" value="3" name="sex" v-model="val3">保密
        <p>你的性别是：{{val3}}</p>
        <br>
        <span>爱好</span>
        <input type="checkbox" value="sing" v-model="val4">唱
        <input type="checkbox" value="dance" v-model="val4">跳
        <input type="checkbox" value="rap" v-model="val4">rap
        <input type="checkbox" value="basketball" v-model="val4">打篮球
        <p>你的爱好是：{{val4}}</p>
        <span>你的就业城市</span>
        <select v-model="val5">
            <!-- multiple 多部分的  可以实现下拉多选 -->
            <option value="1">上海</option>
            <option value="2">杭州</option>
            <option value="3">郑州</option>
            <option value="4">深圳</option>
            <option value="5">苏州</option>
            <option value="6">北京</option>
        </select>
        <p>你的就业城市是：{{val5}}</p>
        <hr>
        <!-- <input type="text" v-model="val6"> -->
        <!-- @input 对应MVVM中的 v到m的变化，监听视图的变化，更新数据 -->
        <!-- :value 对应MVVM中的 m到v的变化，监听数据的变化，更新视图 -->
        <input type="text" @input="getVal" :value="val6">
        <p>{{val6}}</p>
        <hr>
        <!-- 修饰符 -->
        <!-- .lazy 事件从input换成了change，变懒了，不会实时响应用户的操作。可以用在输入框上，减少http请求 -->
        <input type="text" v-model.lazy="val7">
        <p>{{val7}}</p>
        <br>
        <!-- .trim 过滤首尾空格，用在用户名或者密码框等场景 -->
        <input type="text" v-model.trim="val8">
        <p>{{val8}}</p>
        <br>
        <!-- .number 只能输入数字 场景：手机号 购物车的数量 QQ号等 -->
        <input type="text" v-model.number="val9">
        <p>{{val9}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                val1: '',
                val2: '',
                val3: '3',
                val4: [],
                val5: '',
                val6: '',
                val7: '',
                val8: '',
                val9: ''
            },
            methods: {
                getVal(e) {
                    console.log(e.target.value);
                    this.val6 = e.target.value;
                }
            }
        })
    </script>
</body>
</html>